<script setup>
import { ref } from 'vue'
import { userCancelOrderService, userConfirmOrderService } from '@/apis/order'
import PaymentComponent from '@/components/PaymentComponent/PaymentComponent.vue'
import EvaluateComponent from '@/UserCenterPackage/Orders/components/EvaluateComponent.vue'

const props = defineProps({
	orderList: {
		type: Array,
		required: true
	}
})

const emits = defineEmits(['updateList'])

// 控制付款弹出层组件的弹出
const isPayOpen = ref(false)

// 控制出行二维码弹出层组件的弹出
const isCodeOpen = ref(false)

// 控制评价弹出层组件的弹出
const isEvaluateOpen = ref(false)

// 用户付款时的所需的订单参数
const payOrderData = ref({})

//点击订单时的订单信息
const clickOrderInfo = ref({})

// 付款组件弹出
const payOpen = () => {
	isPayOpen.value = true
}

// 付款组件关闭
const payClose = () => {
	isPayOpen.value = false
	setTimeout(function () {
		uni.reLaunch({
			url: '/UserCenterPackage/Orders/Orders?index=2'
		})
	}, 2000)
}

// 二维码组件弹出
const codeOpen = () => {
	isCodeOpen.value = true
}

// 二维码组件关闭
const codeClose = () => {
	isCodeOpen.value = false
	emits('updateList')
}

// 评价组件弹出
const evaluateOpen = () => {
	isEvaluateOpen.value = true
}

// 评价组件关闭
const evaluateClose = () => {
	isEvaluateOpen.value = false
	emits('updateList')
}

// 用户取消订单
const onClickCancel = (item) => {
	uni.showModal({
		content: '您确定取消该订单吗？',
		cancelText: '点错了',
		confirmText: '确定',
		success: async (res) => {
			if (res.confirm) {
				await userCancelOrderService({
					userID: item.user_id,
					orderID: item.order_id,
					totalPrice: item.total_amount
				})

				// 更新订单列表
				emits('updateList')
			}
		}
	})
}

// 用户支付订单
const onClickPay = (item) => {
	payOpen()

	payOrderData.value = {
		totalPrice: parseFloat(item.total_amount),
		orderID: parseInt(item.order_id, 10),
		userID: parseInt(item.user_id, 10)
	}
}

// 用户确认出行
const onClickConfirm = async (item) => {
	await userConfirmOrderService(item.order_id)

	clickOrderInfo.value = JSON.stringify(
		item.people.map((item) => {
			return {
				姓名: item.name,
				手机号: item.phone,
				身份证号: item.idCard
			}
		})
	)

	uni.showModal({
		content: '您确定展示出行二维码吗？',
		cancelText: '点错了',
		confirmText: '确定',
		success: async (res) => {
			if (res.confirm) {
				codeOpen()
			}
		}
	})
}

// 用户评价订单
const onClickEvaluate = (item) => {
	clickOrderInfo.value = item
	evaluateOpen()
}
</script>

<template>
	<view class="container">
		<view class="order-list">
			<view class="order-item" v-for="(item, index) in props.orderList" :key="item.order_id">
				<view class="header">
					<view class="order-type">
						<text
							class="iconfont"
							:class="{
								'icon-lvyou': item.order_type === 'scenery',
								'icon-jiudian': item.order_type === 'hotel',
								'icon-cantingcaipin': item.order_type === 'restaurant'
							}"
						></text>
						{{ item.order_type === 'scenery' ? '门票' : item.order_type === 'hotel' ? '酒店' : '餐厅' }}
					</view>
					<view class="order-status">
						{{ item.status === 0 ? '待支付' : item.status === 1 ? '待出行' : item.status === 2 ? '待点评' : item.status === 3 ? '已取消' : '已完成' }}
					</view>
				</view>

				<view class="body">
					<view class="name">{{ item.place_name }}</view>
					<view class="description">{{ item.description }}</view>
					<view class="produce_type">{{ item.product_type }}</view>
					<view class="detail">
						<view class="quantity">{{ item.quantity + (item.order_type === 'scenery' ? '张' : item.order_type === 'hotel' ? '间' : '套') }}</view>
						<view class="date">出行日期:{{ item.order_type === 'hotel' ? item.travel_start_date + ' 至 ' + item.travel_end_date : item.travel_end_date }}</view>
					</view>
				</view>

				<view class="price-detail">
					<view class="money">￥</view>
					<view class="number">{{ item.total_amount }}</view>
				</view>

				<view class="bottom">
					<view class="cancel-btn" @tap="onClickCancel(item)" v-if="item.status === 0 || item.status === 1">取消订单</view>
					<view class="pay-btn" @tap="onClickPay(item)" v-if="item.status === 0">去支付</view>
					<view class="complete-btn" @tap="onClickConfirm(item)" v-if="item.status === 1">确认出行</view>
					<view class="evaluate-btn" @tap="onClickEvaluate(item)" v-if="item.status === 2">评价</view>
				</view>
			</view>
		</view>

		<!-- 用户付款 -->
		<up-popup :show="isPayOpen" :round="10" mode="bottom" closeable closeOnClickOverlay @close="payClose" @open="payOpen">
			<PaymentComponent
				@closePayProp="payClose"
				:totalPrice="payOrderData.totalPrice || 0"
				:orderID="payOrderData.orderID || 0"
				:userID="payOrderData.userID || 0"
			></PaymentComponent>
		</up-popup>

		<!-- 用户出行生成二维码 -->
		<up-popup :show="isCodeOpen" :round="10" mode="center" closeable closeOnClickOverlay @close="codeClose" @open="codeOpen">
			<view class="code">
				<up-qrcode v-if="isCodeOpen" :size="200" :val="clickOrderInfo" showLoading loadingText="loading..."></up-qrcode>
				<view class="text">请扫描二维码确认出行人身份信息</view>
			</view>
		</up-popup>

		<!-- 用户点评订单 -->
		<up-popup :show="isEvaluateOpen" :round="10" mode="center" closeable closeOnClickOverlay @close="evaluateClose" @open="evaluateOpen">
			<EvaluateComponent :orderID="clickOrderInfo.order_id || 0" :userID="clickOrderInfo.user_id || 0" @closeEvaluateProp="evaluateClose"></EvaluateComponent>
		</up-popup>
	</view>
</template>

<style lang="scss" scoped>
.container {
	@mixin common-btn {
		border-radius: 999px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 20rpx;
		margin: 0 10rpx;
	}

	.order-list {
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.order-item {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			background-color: #fff;
			padding: 40rpx;
			border-radius: 10rpx;
			margin: 30rpx 0;

			.header {
				display: flex;
				justify-content: space-between;
				font-size: 35rpx;
				padding-bottom: 20rpx;
				color: #666666;

				.order-type {
					display: flex;
					align-items: center;

					.iconfont {
						margin-right: 10rpx;
					}

					.icon-lvyou {
						color: #8674fb;
					}

					.icon-jiudian {
						color: #3fb1fc;
					}

					.icon-cantingcaipin {
						color: #1bce73;
					}

					.icon-gonglve {
						color: #fa8551;
					}
				}
			}

			.body {
				color: #666666;

				.name {
					font-size: 40rpx;
					font-weight: bold;
					padding-bottom: 20rpx;
					color: #000000;
				}

				.detail {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 0;
				}
			}

			.price-detail {
				display: flex;
				justify-content: flex-end;
				align-items: baseline;

				.money {
					font-size: 40rpx;
				}

				.number {
					font-size: 50rpx;
					font-weight: bold;
				}
			}

			.bottom {
				display: flex;
				justify-content: flex-end;
				padding-top: 20rpx;

				.cancel-btn {
					@include common-btn;
					border: 2rpx solid #666666;
					color: #333;
				}

				.pay-btn {
					@include common-btn;
					border: 2rpx solid #f56c6c;
					color: #f56c6c;
				}

				.complete-btn {
					@include common-btn;
					border: 2rpx solid #20be44;
					color: #20be44;
				}

				.evaluate-btn {
					@include common-btn;
					border: 2rpx solid #d19a66;
					color: #d19a66;
				}
			}
		}
	}

	.code {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx;

		.text {
			font-size: 35rpx;
			font-weight: bold;
			padding-top: 50rpx;
		}
	}
}
</style>
